<template>
    <div>
        <!-- 轮播图 -->
        <div class="swiper-box">
            <Swipe class="swiper" :autoplay="3000">
                <SwipeItem v-for="(image, index) in swipers" :key="index">
                    <img v-lazy="image"/>
                </SwipeItem>
            </Swipe>
        </div>
        <!-- 九宫格 -->
        <Grid :column-num="3" square :icon-size="60">
            <GridItem v-for="(item, i) in gridList" :key="i" :icon="item.image" :text="item.name" :to="item.to" />
        </Grid>
    </div>
</template>

<script>
import axios from 'axios';
import { Swipe, SwipeItem, Grid, GridItem  } from 'vant';

export default {
    components: { Swipe, SwipeItem, Grid, GridItem  },
    data() {
        return {
            swipers: [],
            gridList: [
                { name: '新闻资讯', image: require('../../images/menu1.png'), to: { name: 'NewsList' } },
                { name: '图片分享', image: require('../../images/menu2.png'), to: { name: 'PhotoList' } },
                { name: '商品购买', image: require('../../images/menu3.png'), to: { name: 'GoodsList' } },
                { name: '留言反馈', image: require('../../images/menu4.png'), to: { name: '' } },
                { name: '视频专区', image: require('../../images/menu5.png'), to: { name: '' } },
                { name: '联系我们', image: require('../../images/menu6.png'), to: { name: '' } },
            ]
        };
    },
    methods: {
        // 获取轮播图数据
        getSwiperList() {
            axios.get('/api/swiper')
                .then(resp => this.swipers = resp.data.swipers)
                .catch(err => console.error('轮播图数据请求失败', err.message));
        }
    },
    created() {
        this.getSwiperList();
    }
};
</script>

<style lang="less" scoped>
    .swiper-box {
        width: 100%;
        height: calc(100vw * (9 / 16));
        overflow: hidden;
    }
    .van-swipe-item {
        width: 100%;
        height: calc(100vw * (9 / 16));
        img {
            width: 100%;
            height: calc(100vw * (9 / 16));
            object-fit: cover;
            object-position: center;
            font-size: 0;
        }
    }
</style>